<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Settings: nTube.</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=2">
		<meta name="description" content="nTube: Settings. [NextUI]">
		<meta charset="UTF-8">
        <meta name="theme-color" content="#111111">
        <link rel="manifest" href="/manifest.json">
        <style>
            html {
                --root-background-color: #111111;
                --root-color: white;
                --root-font: sans-serif;
                --flat-box-border: 1px solid rgba(255, 255, 255, 0.2);
                --flat-box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08);
            }
            head, body {
                color: var(--root-color, #333333);
                background-color: var(--root-background-color, white);
                font-family: var(--root-font, "sans-serif");
            }
            .poly-item {
				padding-left: 5px;
				box-shadow: var(--flat-box-shadow, "0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08)");
				border: var(--flat-box-border, "1px solid rgba(255, 255, 255, 0.2)");
				margin-bottom: 10px;
			}
            .nlang-string {
                content: "";
            }
            .menu {
				position: fixed;
   				top: 0;
   				margin: auto;
   				left: 0;
   				right: 0;
   				width: 100%;
				height: 32px;
				border-bottom: 1px solid rgba(68, 68, 68, 0.875);
				background-color: #111111;
				margin-right: 0px;
				margin-left: -1px;
				z-index: 15;
			}
        </style>
        <link rel="preload" href="resources/promise-queues.js" as="script">
        <link rel="preload" href="resources/base.js" as="script">
        <link rel="preload" href="resources/search.js" as="script">
        <link rel="preload" href="resources/settings_ui.js" as="script">
        <link rel="preload" href="resources/search.css" as="style">
        <link rel="preload" href="resources/new_ui.css" as="style">
        <script src="resources/promise-queues.js"></script>
        <script src="resources/base.js"></script>
        <script src="resources/lang.js"></script>
        <script src="resources/search.js"></script>
        <script src="resources/settings_ui.js"></script>
        <link rel="stylesheet" type="text/css" href="resources/search.css"/>
        <link rel="stylesheet" type="text/css" href="resources/new_ui.css"/>
    </head>
    <body>
        <div class="menu">
            <div style="float: left; width: auto; min-width: 20%;">
                <p style="display: inline-block; padding-left: 5px; line-height: 20%;vertical-align: middle;font-weight: bold; font-size: large; margin-top: 15px;">
                    <span style="color: red;">n</span><span style="color: rgb(92, 250, 158);">T</span>
                    <sub id="ntube_version_main_menu_label" style="font-size: xx-small;line-height: 20%; font-family: monospace;">nUI-indev</sub>
                </p>
                &nbsp;&centerdot;&nbsp;
                <span class="nlang-string" ntube-lang-fallback="This UI is experimental and subject to change." ntube-lang-key="ntube.lang.experimental_ui_warning" style="line-height: 60%; color: orangered"></span>
            </div>
            <div style="float: right; height: 100%;">
				<div style="height: 100%;">
					<style>
					#search_overlay {
						z-index: 8;
						position: fixed;
						background-color: rgba(17, 17, 17, .95);
						width: 100%;
						height: 100%;
					}
					.search_hidden {
						display: none;
						visibility: hidden;
					}
					#search_bar {
						background-color: inherit;
						color: inherit;
						border: none;
						border-left: 1px solid green;
						height: 31px !important;
						width: 40vw;
						transition: border-left .5s ease-in-out;
						font-family: monospace;
						font-size: large;
						padding-left: 5px;
					}
					#search_bar:focus {
                        border-left: 1px solid firebrick;
					}
					#search_button {
						border: none;
						border-left: 1px solid rgba(0,128,0,.7);
						border-right: none;
						height: 100%;
						background-color: inherit;
						color: inherit;
						margin-right: 0px;
						font-family: inherit;
					}
					</style>
                    <input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube."></input><button id="search_button" onclick="search_start(null);">Search</button>
					<script>
						run_promise(function() {
                            if (window.SearchBar && window.SearchBar.init) window.SearchBar.init();
                        });
					</script>
				</div>
			</div>
            <div style="clear: both;"></div>
        </div>
        <div id="search_overlay" class="search_hidden" style="margin-top: -38px; margin-left: -8px; margin-right: 0px; padding-left: 5px;">
			<div style="padding-bottom: 20px;"></div>
			<div id="search-top-ui" style="width: 100%; color: white;">
				<div style="float: left;">
					<h1 style="line-height: 80%;">Search.</h1>
					<h3 style="line-height: 80%;">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right;padding-right: 15px;padding-top: 35px;">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit; font-family: inherit;" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: calc(100% - 170px); margin-right: 0px; overflow-y: auto; color: white;">
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
			run_promise(function() {
                id("_search_results").innerHTML = "";
            });
			</script>
		</div>
        <div style="margin-top: 38px;"></div>
        <h1>Settings.</h1>
        <noscript class="poly-item" style="border: 1px solid orange;">
            <h3 id="error_title">Javascript missing.</h3>
            <p id="error_string">To configure settings within nTube you need to run JavaScript.</p>
        </noscript>
        <div class="poly-item" style="border: 1px solid orange;display: none; visibility: hidden;" id="storage_error_div">
            <h3 id="error_title" class="nlang-string" ntube-lang-fallback="Storage missing." ntube-lang-key="ntube.lang.storage_support_missing"></h3>
            <p id="error_string" class="nlang-string" ntube-lang-fallback="nTube requires a form of storage in order to store settings." ntube-lang-key="ntube.lang.storage_support_missing_text"></p>
        </div>
    </body>
    <script>
        run_task(function() {
            nTubeLocale.init();
        }, nTube.PromisePriority.BLOCKING_TASK);
        run_task(function() {
        	if (!canStoreData()) {
        		show(id("storage_error_div"));
        	}
        }, nTube.PromisePriority.BACKGROUND_TASK);
    </script>
</html>